React x Firebaseでchat appを作る練習log

こっちのほうがやりやすそう

/icons/hr.icon

もうやった

メモは残しておいた

code:sh

$ yarn create react-app react-chat-sample --template typescript

$ cd react-chat-sample

$ cd

project作成に時間かかっている

この前は7minくらいかかった

少し待つか

11:26:57 だいぶ待つなあ

code:sh

$ yarn start

yarn run v1.22.5

$ react-scripts start

/home/takker/git/react-chat-sample/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239

^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'

at verifyTypeScriptSetup (/home/takker/git/react-chat-sample/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)

at Object.<anonymous> (/home/takker/git/react-chat-sample/node_modules/react-scripts/scripts/start.js:31:1)

at Module._compile (internal/modules/cjs/loader.js:1063:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)

at Module.load (internal/modules/cjs/loader.js:928:32)

at Function.Module._load (internal/modules/cjs/loader.js:769:14)

at internal/main/run_main_module.js:17:47

error Command failed with exit code 1.

類似のissue

最新

最近多発しているっぽい

code:sh

yarn build

yarn run v1.22.5

$ react-scripts build

The following changes are being made to your tsconfig.json file:

- compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)

Creating an optimized production build...

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.1.0

YOUR TYPESCRIPT VERSION: 4.1.2

Please only submit bug reports when using the officially supported version.

=============

Failed to compile.

/home/takker/git/react-chat-sample/src/App.tsx

TypeScript error in /home/takker/git/react-chat-sample/src/App.tsx(7,5):

Could not find a declaration file for module 'react/jsx-runtime'. '/home/takker/git/react-chat-sample/node_modules/react/jsx-runtime.js' implicitly has an 'any' type.

5 | function App() {

6 | return (

7 | <div className="App">

| ^

8 | <header className="App-header">

9 | <img src={logo} className="App-logo" alt="logo" />

10 | <p>

error Command failed with exit code 1.

ふつうerrorにならないところでerrorが起きてる

てか以前同じcommand使ったときはなんともなかったのに……

なんにもcodeいじっていないぞ！？

どうしろっていうんだ……

11:59:20 おんなじか。

code:sh

$yarn build 46.4s  2020年11月20日 02時58分21秒

yarn run v1.22.5

$ react-scripts build

The following changes are being made to your tsconfig.json file:

- compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)

12:22:54 typescriptのversionを下げてみる

やってみる価値はある

12:27:40 成功！

まとめておこう

typescriptのversion warningは消えた

code:sh

Creating an optimized production build...

Failed to compile.

/home/takker/git/react-chat-sample/src/App.tsx

TypeScript error in /home/takker/git/react-chat-sample/src/App.tsx(7,5):

Could not find a declaration file for module 'react/jsx-runtime'. '/home/takker/git/react-chat-sample/node_modules/react/jsx-runtime.js' implicitly has an 'any' type.

5 | function App() {

6 | return (

7 | <div className="App">

| ^

8 | <header className="App-header">

9 | <img src={logo} className="App-logo" alt="logo" />

10 | <p>

error Command failed with exit code 1.

12:57:26 解決したので再開

修正箇所はcommitしておいた

12:57:44 prettierを入れる

code:sh

$ yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

eslintの初期化をしたらなんかまたinstallされた

13:04:57 なんかいっぱい入った

code:sh

$ eslint --init

✔ How would you like to use ESLint? · style

✔ What type of modules does your project use? · esm

✔ Which framework does your project use? · react

✔ Does your project use TypeScript? · No / Yes

✔ Where does your code run? · browser

✔ How would you like to define a style for your project? · prompt

✔ What format do you want your config file to be in? · JSON

✔ What style of indentation do you use? · 4

✔ What quotes do you use for strings? · single

✔ What line endings do you use? · unix

✔ Do you require semicolons? · No / Yes

Local ESLint installation not found.

The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest

Installing eslint-plugin-react@latest, @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest, eslint@latest

npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained

npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'

npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained

npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained

npm WARN deprecated har-validator@5.1.5: this library is no longer supported

npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.

npm WARN deprecated rollup-plugin-babel@4.4.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.

npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'

npm WARN rm not removing /home/takker/git/react-chat-sample/node_modules/.bin/jest as it wasn't installed by /home/takker/git/react-chat-sample/node_modules/jest

npm WARN rm not removing /home/takker/git/react-chat-sample/node_modules/.bin/rimraf as it wasn't installed by /home/takker/git/react-chat-sample/node_modules/rimraf

npm WARN rm not removing /home/takker/git/react-chat-sample/node_modules/.bin/uuid as it wasn't installed by /home/takker/git/react-chat-sample/node_modules/uuid

npm WARN rm not removing /home/takker/git/react-chat-sample/node_modules/.bin/semver as it wasn't installed by /home/takker/git/react-chat-sample/node_modules/semver

npm WARN rm not removing /home/takker/git/react-chat-sample/node_modules/.bin/mkdirp as it wasn't installed by /home/takker/git/react-chat-sample/node_modules/mkdirp

npm WARN rm not removing /home/takker/git/react-chat-sample/node_modules/.bin/json5 as it wasn't installed by /home/takker/git/react-chat-sample/node_modules/json5

core-js@2.6.11 postinstall /home/takker/git/react-chat-sample/node_modules/babel-runtime/node_modules/core-js

node -e "try{require('./postinstall')}catch(e){}"

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:

core-js@3.7.0 postinstall /home/takker/git/react-chat-sample/node_modules/core-js

node -e "try{require('./postinstall')}catch(e){}"

core-js-pure@3.7.0 postinstall /home/takker/git/react-chat-sample/node_modules/core-js-pure

node -e "try{require('./postinstall')}catch(e){}"

ejs@2.7.4 postinstall /home/takker/git/react-chat-sample/node_modules/ejs

node ./postinstall.js

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.2 (node_modules/jest-haste-map/node_modules/fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.2.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/chokidar/node_modules/fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.2 (node_modules/jest-haste-map/node_modules/fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.2.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules/chokidar/node_modules/fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/watchpack-chokidar2/node_modules/chokidar/node_modules/fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/webpack-dev-server/node_modules/chokidar/node_modules/fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ eslint-plugin-react@7.21.5

+ @typescript-eslint/eslint-plugin@4.8.1

+ eslint@7.13.0

+ @typescript-eslint/parser@4.8.1

added 237 packages from 121 contributors, removed 125 packages, updated 1551 packages and audited 1808 packages in 142.701s

120 packages are looking for funding

found 0 vulnerabilities

Successfully created .eslintrc.json file in /home/takker/git/react-chat-sample

ESLint was installed locally. We recommend using this local copy instead of your globally-installed copy.

13:11:22 prettierの設定を書く

code:.eslint.json

{

"plugins": [

+ "prettier",

],

"extends": [

+ "plugin:prettier/recommended",

+ "prettier/@typescript-eslint",

+ "prettier/react",

+ "prettier/standard",

],

"rules": {

"indent": [

"error",

- 4

+ 2

],

// <xxx></xxx>を<xxx />にする

+ "react/self-closing-comp": ["error", {

+ "component": true,

+ "html": true

+ }],

code:.eslint.json

+ "prettier/prettier": [

+ "error",

+ {

+ "singleQuote": true,

+

+ "trailingComma": "all",

+ //"semi": true, default いらない

+ //"useTabs": false defaultなのでいらない

+ },

+ ],

13:57:40 eslintの設定終了

随分時間がかかったな……

14:51:02 eslintの設定をcommitしたら、API keyの設定をする

15:36:37 commitした

15:36:44 API keyの情報を書いた

いよいよfirebaseに接続する

code:sh

$ firebase login

? Allow Firebase to collect CLI usage and error reporting information? Yes

success

https://gyazo.com/6d3a9797ebd6bdaee72adc9355e8039b

code:sh

$ firebase init

なら先に作るか

code:chat_data.rules

service cloud.firestore {

match /databases/{database}/documents {

function isAuthenticated() {

return request.auth != null;

}

function isUserAuthenticated(userId) {

return request.auth.uid == userId;

}

match /users/{userId} {

allow create, read: if isAuthenticated();

allow update: if isUserAuthenticated(userId);

match /foo/{fooId} {

allow read, create, update, delete: if isUserAuthenticated(userId);

}

}

}

}

まだruleを理解していない

もう先にdeployしちゃえ

15:56:22

https://gyazo.com/931c211901f4c5a76e963bf8c49059b0

GitHubにも勝手にrepo作ってくれるのか

便利

そういうことじゃなかった

repo作った

15:59:55 うまく行かないので中断した

code:sh

? For which GitHub repository would you like to set up a GitHub workflow?

> FirebaseError: HTTP Error: 404, Not Found

この間ポテトを食べてた

16:14:48 もいちど実行する

16:19:07 うまくいった

code:bash

$ firebase init

You're about to initialize a Firebase project in this directory:

/home/takker/git/react-chat-sample

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Firestore

: Deploy rules and create indexes for Firestore, Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.

You can create multiple project aliases by running firebase use --add,

but for now we'll just set up a default project.

? Please select an option: Use an existing project

? Select a default Firebase project for this directory: react-chat-sample-fb095 (react-chat-sample)

i Using project react-chat-sample-fb095 (react-chat-sample)

=== Firestore Setup

Firestore Security Rules allow you to define how and when to allow

requests. You can keep these rules in your project directory

and publish them with firebase deploy.

? What file should be used for Firestore Rules? chatData.rules

Firestore indexes allow you to perform complex queries while

maintaining performance that scales with the size of the result

set. You can keep index definitions in your project directory

and publish them with firebase deploy.

? What file should be used for Firestore indexes? firestore.indexes.json

? File firestore.indexes.json already exists. Do you want to overwrite it with the Firestore Indexes from the Firebase Console? Yes

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that

will contain Hosting assets to be uploaded with firebase deploy. If you

have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

? Set up automatic builds and deploys with GitHub? Yes

? File public/index.html already exists. Overwrite? Yes

✔ Wrote public/index.html

i Detected a .git folder at /home/takker/git/react-chat-sample

i Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.

Visit this URL on this device to log in:

Waiting for authentication...

✔ Success! Logged into GitHub as takker99

? For which GitHub repository would you like to set up a GitHub workflow? takker99/react-chat-sample

? Set up the workflow to run a build script before every deploy? Yes

? What script should be run before every deploy? yarn build

✔ Created workflow file /home/takker/git/react-chat-sample/.github/workflows/firebase-hosting-pull-request.yml

? Set up automatic deployment to your site's live channel when a PR is merged? Yes

? What is the name of the GitHub branch associated with your site's live channel? main

✔ Created workflow file /home/takker/git/react-chat-sample/.github/workflows/firebase-hosting-merge.yml

i Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:

i Action required: Push any new workflow file(s) to your repo

i Writing configuration info to firebase.json...

i Writing project information to .firebaserc...

✔ Firebase initialization complete!

16:43:13 だめだった

16:52:31 だめだった

一旦GitHubに上げて、action経由でなんとかできないか試してみる

16:58:58 なんかでた

https://gyazo.com/4aefeb7846048572ba65bdc42380c0de

まあ当然か。

17:18:01 Actionsは成功したが、deploy結果がまだFirebaseのdefault画面だ

どうしたら直るんだこれ？

17:27:04 これをやってみる

preview からproductionにcloneする

$ firebase hosting:clone react-chat-sample-fb095:main react-chat-sample-fb095:live

17:29:53 成功した！！

17:37:05 流石に疲れてきたな

17:41:53 あとこの練習でやること

chat UIの作成

高度なsampleをコピペしてみたが、一つ一つの要素が絡みすぎてどういう動きになっているのかがわからない

Hooksを使ってlogicとviewを分離する

firestore

データの読み書きの構築

一番後に回す

全員閲覧・投稿者のみ編集可にしてみる

めんどいのでlog in userごとの投稿を完全に分離させてしまおう

あと自由に編集しやすい

authendication

認証

PWA

今回はやらないつもり